<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>璀璨夜空 - 在线烟花秀</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <!-- 夜空背景 -->
    <div id="night-sky">
        <canvas id="starCanvas"></canvas>
        <canvas id="fireworksCanvas"></canvas>
    </div>

    <!-- 控制面板 -->
    <div id="control-panel" class="hidden">
        <div class="panel-header">
            <h3>烟花设置</h3>
            <button id="close-panel" class="icon-btn">
                <i class="fas fa-times"></i>
            </button>
        </div>
        
        <div class="control-group">
            <label>烟花类型</label>
            <select id="firework-type">
                <option value="classic">经典球形</option>
                <option value="spiral">螺旋</option>
                <option value="chrysanthemum">菊花</option>
                <option value="heart">心形</option>
                <option value="smiley">笑脸</option>
            </select>
        </div>

        <div class="control-group">
            <label>颜色主题</label>
            <select id="color-theme">
                <option value="rainbow">彩虹</option>
                <option value="red-gold">红金</option>
                <option value="blue-purple">蓝紫</option>
                <option value="random">随机</option>
            </select>
        </div>

        <div class="control-group">
            <label>发射速度</label>
            <input type="range" id="launch-speed" min="1" max="10" value="5">
            <span id="speed-value">5</span>
        </div>

        <div class="control-group">
            <label>粒子密度</label>
            <input type="range" id="particle-density" min="50" max="500" value="200">
            <span id="density-value">200</span>
        </div>

        <div class="control-group">
            <label>
                <input type="checkbox" id="sound-toggle" checked>
                音效开关
            </label>
        </div>

        <div class="control-group">
            <label>
                <input type="checkbox" id="auto-mode" checked>
                自动烟花秀
            </label>
        </div>

        <div class="control-group">
            <label>
                <input type="checkbox" id="eco-mode">
                节能模式
            </label>
        </div>
    </div>

    <!-- 主控制按钮 -->
    <div id="main-controls">
        <button id="settings-btn" class="icon-btn" title="设置">
            <i class="fas fa-cog"></i>
        </button>
        <button id="fullscreen-btn" class="icon-btn" title="全屏">
            <i class="fas fa-expand"></i>
        </button>
    </div>

    <!-- 节日祝福 -->
    <div id="festival-greeting" class="hidden">
        <div class="greeting-text"></div>
    </div>

    <!-- 音效 -->
    <audio id="firework-sound" preload="auto">
        <source src="firework.mp3" type="audio/mpeg">
        <source src="firework.ogg" type="audio/ogg">
    </audio>

    <script src="fireworks.js"></script>
</body>
</html>
